<template>
  <el-container>
    <el-aside width="200px" style=" border: 1px solid #eee">
      <el-tree
          :data="files"
          :props="props"
          :load="loadNode"
          @node-click="click"
          lazy>
        <template v-slot=" { node, data }">
          <div>{{ data.fileName }}</div>
          <el-link style="position: absolute; right: 8%">
            <i v-if="data.isDir" class="el-icon-plus" @click="addFile(data)"></i>
          </el-link>
          <!--          <a v-if="data.isDir" style="position: absolute; right: 0">+</a>-->
        </template>
      </el-tree>
    </el-aside>
    <el-main>
      <router-view/>
    </el-main>
  </el-container>

  <el-dialog title="新增" v-model="dialogFormVisible" width="300">
    <el-form>
      <el-form-item label="类型:">
        <el-radio-group v-model="newFileType">
          <el-radio label="">文件夹(dir)</el-radio>
          <el-radio label="txt">文本(txt)</el-radio>
          <el-radio label="md">Markdown(md)</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="名称:">
        <el-input size="small" placeholder="新建文档" v-model="newFileName">
          <template #prepend>{{ newFilePath }}</template>
          <template v-if="newFileType!==''" #append>.{{ newFileType }}</template>
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="newFile">确 定</el-button>
    </span>
    </template>
  </el-dialog>
</template>

<script>
import {getFileList, saveTextFile} from "../api/file";

export default {
  name: "Explorer",
  data() {
    return {
      files: [],
      props: {
        label: 'fileName',
        children: [],
        isLeaf: 'isFile'
      },
      dialogFormVisible: false,
      newFileType: "",
      newFilePath: "",
      newFileName: ""
    }
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{name: 'region'}]);
      }
      if (node.level > 1) return resolve([]);
      setTimeout(async () => {
        if (node.level === 0) {
          return resolve([{name: 'region'}]);
        }
        if (node.level > 1) return resolve([]);

        setTimeout(async () => {
          const data = await this.loadDir(node.data.path + node.data.fileName)
          resolve(data);
        }, 500);
      })
    },
    async click(data) {
      await this.$router.push({path: `/explorer`})
      if (data.isDir) {
        return
      }
      let arry = data.fileName.split('.')
      let extName = arry[arry.length - 1]
      switch (extName) {
        case "txt":
          await this.$router.push({name: `Markdown`, query: {path: data.path + '/' + data.fileName, mode: 0}})
          break
        case "png":
          await this.$router.push({path: `Image`, query: {path: data.path + '/' + data.fileName, mode: 0}})
          break
        case "md":
          await this.$router.push({path: `Markdown`, query: {path: data.path + '/' + data.fileName, mode: 0}})
          break
      }
    },
    //加载目录
    async loadDir(path) {
      let res = await getFileList({path: path});
      if (res.data.code === 0) {
        return res.data.data
      } else {
        return []
      }

    },
    ///添加文件
    addFile(dir) {
      this.newFilePath = dir.path + dir.fileName
      this.dialogFormVisible = true;
    },
    async newFile() {
      this.dialogFormVisible = false
      let path = this.newFilePath + this.newFileName
      if (this.newFileType !== "") {
        path += ('.' + this.newFileType)
      }
      await this.$router.push({path: `Markdown`, query: {path: path, mode: 1}})
      // saveTextFile(path, "1234d")
    }
  },
  async mounted() {
    this.files = await this.loadDir("/")
  }
}
</script>

<style scoped>
.main {
}
</style>
